<template>
	<view class="container">
		<view class="header">
			<view class="headerContent">
				<view class="contentLeft">
					<text class="searchIcon"></text>
					<input type="text" class="searchInput" placeholder="请输入关键字" @input="blurSearch" v-model="inputContent">
				</view>
				<text class="contentRight" @click="backToHome">取消</text>
			</view>
		</view>
		<view class="blurSearch">
			<view class="blurSearchItem" v-for="(blurSearchItem, index) in blurSearchList" :key="index" @click="toSearchData(blurSearchItem)">
				{{blurSearchItem}}
			</view>
		</view>
		<view class="hotSearch">
			<text>热门搜索</text>
		</view>
		<uni-list class="list">
			<uni-list-item v-for="(searchItem,index) in searchList" :key="index" class="listItem" @click.native="toSearchData(searchItem)" >{{searchItem}}</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import smartisan from '@/utils/smartisan.js';
	import { throttle } from 'lodash';
	export default {
		data() {
			return {
				searchList: [],
				inputContent: '',
				blurSearchList: [],
			};
		},
		methods: {
			async getSearchData() {
				try{
					const result = await request('/getSearchData');
					this.searchList = result.hot;
				}catch(e){
					console.log('请求获取搜索页数据失败');
				}
			},
			backToHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			blurSearch(event){
							// console.log(event);
							const f = throttle(async() => {
							try{
								const result = await smartisan(`/v1/search/suggest?keyword=${event.detail.value}`);
								this.blurSearchList = result.data;
							}catch(e){
								console.log('请求获取搜索数据失败');
							}
						},300, { 'trailing': true })
						f();
			} ,
			toSearchData(searchData) {
				uni.reLaunch({
					url: `/pages/searchData/searchData?searchData=${searchData}`,
				})
			}
		},
		mounted() {
			this.getSearchData();
		},
	}
</script>

<style lang="stylus">
	.container
		position: relative
		height: 100%
		.header
			position: fixed
			top: 0
			left: 0
			height: 100upx
			width: 100%
			padding: 20upx 12.5upx
			background-color: #f5f5f5
			box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%)
			// box-sizing: border-box
			border-top: 2upx solid #cecece
			border-bottom: 2upx solid #ebebeb
			.headerContent
				display: flex
				align-items: center
				padding: 19.2upx 12.5upx
				.contentLeft
					width: 575upx
					height: 62.5upx
					box-shadow: inset 0 0.05rem 3px rgb(0 0 0 / 2%), inset 0 2px 4px rgb(0 0 0 / 15%), inset 0 0 0 0.05rem rgb(0 0 0 / 10%), 0 0.05rem 0.05rem 0 hsl(0deg 0% 100% / 10%)
					border: 2upx solid #ddd
					background: #fff
					border-radius: 30upx
					box-sizing: border-box
					display: flex
					align-items: center
					.searchIcon
						width: 62.5upx
						height: 62.5upx
						background-image: url('/static/images/search.png')
						background-size: 50upx 50upx
						background-position: 50% 50%
					.searchInput
						color: #757575
				.contentRight
					width: 125upx
					height: 62.5upx
					text-align: center
					line-height: 62.5upx
					box-sizing: border-box
					border: 2upx solid #d7d7d7
					border-radius: 10upx
					margin-left: 15upx
		.blurSearch
			position: absolute
			top: 0
			left: 0
			z-index: 998
			width: 100%
			.blurSearchItem
				z-index: 999
				position: relative
				width: 90%
				top: 0
				left: 0
				padding: 0 37.5upx
				overflow: hidden
				text-overflow: ellipsis
				white-space: nowrap
				font-size: 50upx
				height: 104upx
				line-height: 104upx
				padding: 0 38upx 0
				color: #333
				border-bottom: 2upx solid #ebebeb
				background-color: #f8f8f8
				font-weight: 700
		.hotSearch
			width: 90%
			height: 120upx
			margin: 140upx auto 0
			line-height: 120upx
			color: #8e8e8e
		.list
			display: flex
			flex-wrap: wrap
			width: 90%
			margin: 0 auto
			.listItem
				color: red
				height: 60upx
				line-height: 60upx
				text-align: center
				font-weight: 700
				font-size: 28upx
				padding: 0 32upx 0
				opacity: 1
				-webkit-transition: opacity .15s ease-out
				transition: opacity .15s ease-out
				border: 2upx solid #ffca6d
				border-radius: 30upx
				margin: 0 9upx 16.6upx 0
				color: #e78612
				background-color: #fff7e4
				
</style>
